<template>
   <el-card shadow="always" :body-style="{ padding: '20px' }">
       <div slot="header">
           <!-- 路径导航 -->
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>商品分类</el-breadcrumb-item>
            </el-breadcrumb>
       </div>
        <div style="float:right">
                    <el-button type="primary" size="default" @click="addShow=true"> 添加</el-button>
                </div>
       <!-- card body -->
       <!-- 表格区域 -->
       <tree-table
            :data="cateList"
            :columns="columns"
            :expand-type="false"
            :selection-type="false"
            :show-index="true"
       >
           <template slot="action">
              <el-button type="success" size="small" icon="el-icon-s-tools"></el-button>
              <el-button type="danger" size="small"  icon="el-icon-delete"></el-button>
           </template>
           <template slot="canuse" slot-scope="scope">
             <i v-if="scope.row.cat_delated" class="el-icon-error"></i>
             <i v-else class="el-icon-success"></i>
           </template>
           <template slot="level" slot-scope="scope">
                 <el-tag type="danger" size="samll"  v-if="scope.row.cat_level==0">一级</el-tag>
                <el-tag type="primary" size="samll" v-if="scope.row.cat_level==1">二级</el-tag>
                 <el-tag type="success" size="samll" v-if="scope.row.cat_level==2">三级</el-tag>
           </template>
           
       </tree-table>
       <!-- 分页器 -->
         <el-pagination
                background
                layout="sizes,prev,pager,next,jumper,->,total"
                :page-size="pagesize"
                :current-page.sync="pagenum"
                :page-sizes="[10,20,30,40]"
                :total="total"
                @size-change="sizeChange"
                @current-change="pageChange"
                >
            </el-pagination>

        <!-- 添加弹框 -->
        <el-dialog
            title="添加分类"
            :visible.sync="addShow"
            width="30%"
           >
           <!-- 表单区域 -->
           <el-form :model="addForm" ref="addForm" :rules="addFormRules" label-width="80px" >
               <el-form-item label="分类名" prop="cat_name">
                   <el-input v-model="addForm.cat_name" ></el-input>
               </el-form-item>
               <el-form-item label="上级分类">
                  <div class="block">
                        <el-cascader
                            v-model="addForm.cat_pid"
                            :options="cateAllList"
                            :props="{ checkStrictly: true ,label:'cat_name',value:'cat_id'}"
                            clearable></el-cascader>
                    </div>
               </el-form-item>
               
           </el-form>
           
            <span slot="footer">
                <el-button @click="addShow = false">取消</el-button>
                <el-button type="primary" @click="addSubmit" >确定</el-button>
            </span>
        </el-dialog>
        
   </el-card>
   
</template>
<script>
let defaultAddForm={
                cat_pid:0,
                cat_name:'',
                cat_level:0
            }
export default {
    data(){
        return {
            // 全部分类列表
            cateAllList:[],
            //分类列表
            cateList:[],
            pagenum:1, // 页码
            pagesize:10, // 每页的条数
            total:0, // 总数
            // 表格的每列信息cat_deleted
            columns:[
                {label:'分类名',prop:'cat_name'},
                {label:'是否有效',type:'template',template:'canuse'},
                {label:'层级',type:'template',template:'level'},
                {label:'操作',type:'template',template:'action'},
            ],
            // 添加弹框的显示
            addShow:false,
            // 添加表单信息
            addForm:{
               ... defaultAddForm
            },
            //添加表单规则
            addFormRules:{
               cat_name:[
                   {
                       required:true,message:'请输入分类名',tiggle:'blur'
                   },
                   {
                       min:2,max:12,message:'长度在2-12之间',tiggle:'blur'
                   },
               ]
            }
        }
    },
    methods:{
        // 提交添加商品分类
       async addSubmit(){
            
            if(Array.isArray(this.addForm.cat_pid)){
                if(this.addForm.cat_pid.length){
                    this.addForm.cat_level=this.addForm.cat_pid.length
                    this.addForm.cat_pid=this.addForm.cat_pid[this.addForm.cat_pid.length-1]
                }else {
                    this.addForm.cat_level=0
                    this.addForm.cat_pid=0
                }
            }
            console.log(this.addForm);
            let {data:res} =await this.$axios.post('categories',this.addForm)
            if(res.meta.status!==201) return this.$message.error(res.meta.msg)
            this.addShow=false
            this.getCateList()
            this.getAllCateList()
            this.addForm={
               ... defaultAddForm
            }
            
        },
        // 获取商品分类列表
       async getCateList(){
           let {data:res}=await this.$axios.get('categories',{
               params:{
                   pagenum:this.pagenum,
                   pagesize:this.pagesize,
               }
           })
           if(res.meta.status!==200) return this.$message.error(res.meta.msg)
           console.log(res);
           this.cateList=res.data.result
           this.total=res.data.total
        },
        // 获取商品全部分类列表
       async getAllCateList(){
           let {data:res}=await this.$axios.get('categories')
           if(res.meta.status!==200) return this.$message.error(res.meta.msg)
           
           this.cateAllList=res.data
          
        },
        // 每页展示的数据个数变化
        sizeChange(val){
            this.pagesize=val
            this.getCateList()
        },
        // 页码发生变化
        pageChange(val){
            this.pagenum=val
             this.getCateList()
        }

    },created(){
        this.getCateList()
        this.getAllCateList()
    }
}
</script>
<style lang="less">

</style>
